<template>
  <!-- icon -->
  <Icon
    class="ba-icon-dark"
    v-if="field.render == 'icon'"
    :name="fieldValue ? fieldValue : field.default ?? ''"
  />
  <!-- switch -->
  <el-switch
    v-if="field.render == 'switch'"
    @change="changeField($event, property)"
    :model-value="fieldValue.toString()"
    :loading="row.loading"
    active-value="0"
    inactive-value="1"
    inline-prompt
  />
  <el-switch
    v-if="field.render == 'switchAccess'"
    @change="changeField($event, property)"
    :model-value="fieldValue.toString()"
    :loading="row.loading"
    active-value="1"
    inactive-value="0"
    active-text="启"
    inactive-text="停"
    inline-prompt
  />
  <!-- image -->
  <!-- <div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
    <el-image :preview-teleported="true" :preview-src-list="[fullUrl(fieldValue)]" :src="fullUrl(fieldValue)">
    </el-image>
  </div> -->
  <!-- images -->
  <!-- <div v-if="field.render == 'images'" class="ba-render-image">
    <template v-if="Array.isArray(fieldValue) && fieldValue.length">
      <el-image v-for="(item, idx) in fieldValue" :key="idx" :initial-index="idx" :preview-teleported="true"
        :preview-src-list="arrayFullUrl(fieldValue)" class="images-item" :src="fullUrl(item)"></el-image>
    </template>
  </div> -->
  <!-- tag -->
  <div v-if="field.render == 'tag' && fieldValue !== ''">
    <el-tag
      :type="getTagType(fieldValue, field.custom)"
      :effect="field.effect ?? 'light'"
      :size="field.size ?? 'default'"
      >{{
        field.replaceValue ? field.replaceValue[fieldValue] : fieldValue
      }}</el-tag
    >
  </div>
  <!-- tags -->
  <div v-if="field.render == 'tags'">
    <template v-if="Array.isArray(fieldValue)">
      <template v-for="(tag, idx) in fieldValue" :key="idx">
        <el-tag
          v-if="tag"
          class="m-10"
          :type="getTagType(tag, field.custom)"
          :effect="field.effect ?? 'light'"
          :size="field.size ?? 'default'"
        >
          {{
            field.replaceValue ? field.replaceValue[tag] ?? tag : tag
          }}</el-tag
        >
      </template>
    </template>
    <template v-else>
      <el-tag
        class="m-10"
        v-if="fieldValue !== ''"
        :type="getTagType(fieldValue, field.custom)"
        :effect="field.effect ?? 'light'"
        :size="field.size ?? 'default'"
      >
        {{
          field.replaceValue
            ? field.replaceValue[fieldValue] ?? fieldValue
            : fieldValue
        }}</el-tag
      >
    </template>
  </div>
  <!-- url -->
  <div v-if="field.render == 'url' && fieldValue">
    <el-input :model-value="fieldValue" placeholder="链接地址">
      <template #append>
        <el-button
          @click="
            typeof field.click == 'function'
              ? field.click(row, fieldValue, field)
              : openUrl(fieldValue, field)
          "
        >
          <!-- <Icon :color="'#606266'" name="el-icon-Position" /> -->
          <component
            is="Position"
            style="width: 1em; height: 1em; color: #606266"
          ></component>
        </el-button>
      </template>
    </el-input>
  </div>
  <!-- datetime -->
  <div v-if="field.render == 'datetime'">
    {{
      !fieldValue ? "-" : timeFormat(fieldValue, field.timeFormat ?? undefined)
    }}
  </div>
  <!-- customTemplate 自定义模板 -->
  <div
    v-if="field.render == 'customTemplate'"
    v-html="
      field.customTemplate ? field.customTemplate(row, field, fieldValue) : ''
    "
  ></div>
  <!-- 自定义组件/函数渲染 -->
  <component
    v-if="field.render == 'customRender'"
    :is="field.customRender"
    :renderRow="row"
    :renderField="field"
    :renderValue="fieldValue"
  />
  <!-- 按钮组 -->
  <div v-if="field.render == 'buttons' && field.buttons">
    <template v-for="(btn, idx) in field.buttons" :key="btn.name">
      <template v-if="btn.display ? btn.display(row, field) : true">
        <!-- 常规按钮 -->
        <el-button
          v-if="btn.render == 'basicButton'"
          v-blur
          @click="onButtonClick(btn)"
          :class="btn.class"
          class="table-operate"
          :type="btn.type"
          :disabled="btn.disabled && btn.disabled(row, field)"
          v-bind="btn.attr"
        >
          <Icon :name="btn.icon" />
          <div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
        </el-button>
        <!-- tipButton 普通增改查按钮 -->
        <el-tooltip
          v-if="btn.render == 'tipButton'"
          :disabled="btn.disabled && btn.disabled(row, field)"
          :content="btn.title ? btn.title : ''"
          placement="top"
        >
          <!-- <el-button v-if="btn.name == 'edit'" v-auth="'edit'" v-blur @click="onButtonClick(btn)" :class="btn.class" -->
          <el-button
            v-if="
              btn.name == 'edit' ||
              'editWarn' ||
              'editSet' ||
              'editDict' ||
              'editRole' ||
              'accessInfo' ||
              'eventInfo' ||
              'warnSet' ||
              'longRange' ||
              'editStandards'
            "
            v-auth="'edit'"
            v-blur
            @click="onButtonClick(btn)"
            :class="btn.class"
            class="table-operate"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
          </el-button>
          <el-button
            v-else-if="
              btn.name == 'add' ||
              'itemAdd' ||
              'origin' ||
              'resetPwd' ||
              'handle'
            "
            v-auth="'add'"
            v-blur
            @click="onButtonClick(btn)"
            :class="btn.class"
            class="table-operate"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
          </el-button>
          <el-button
            v-if="btn.name == 'info'"
            v-auth="'edit'"
            v-blur
            @click="onButtonClick(btn)"
            :class="btn.class"
            class="table-operate"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
          </el-button>
          <el-button
            v-if="btn.name == 'infoTask'"
            v-auth="'edit'"
            v-blur
            @click="onButtonClick(btn)"
            :class="btn.class"
            class="table-operate"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
          </el-button>
          <el-button
            v-else
            v-blur
            @click="onButtonClick(btn)"
            :class="btn.class"
            class="table-operate"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
          </el-button>
        </el-tooltip>
        <!-- confirmButton 需要再次确认的类删除按钮-->
        <el-popconfirm
          v-if="btn.render == 'confirmButton'"
          v-bind="btn.popconfirm"
          @confirm="onButtonClick(btn)"
        >
          <template #reference>
            <div class="ml-6">
              <el-tooltip
                :disabled="btn.disabled && btn.disabled(row, field)"
                :content="btn.title ? btn.title : ''"
                placement="top"
              >
                <!-- v-auth是根据name属性 举例：SysM/menu/del来判断的 -->
                <el-button
                  v-if="
                    btn.name == 'remove' ||
                    'removeWarn' ||
                    'removeDict' ||
                    'removeSet' ||
                    'removeStandards'
                  "
                  v-auth="'remove'"
                  v-blur
                  :class="btn.class"
                  class="table-operate"
                  :type="btn.type"
                >
                  <Icon :name="btn.icon" />
                  <div v-if="btn.text" class="table-operate-text">
                    {{ btn.text }}
                  </div>
                </el-button>
                <el-button
                  v-else
                  v-blur
                  v-auth="'resetPwd'"
                  :class="btn.class"
                  class="table-operate"
                  :type="btn.type"
                >
                  <Icon :name="btn.icon" />
                  <div v-if="btn.text" class="table-operate-text">
                    {{ btn.text }}
                  </div>
                </el-button>
              </el-tooltip>
            </div>
          </template>
        </el-popconfirm>
        <!-- itemAdd按钮 -->
        <el-tooltip
          v-if="btn.render == 'itemAddButton'"
          :disabled="btn.disabled && btn.disabled(row, field)"
          :content="btn.title ? btn.title : ''"
          placement="top"
        >
          <el-button
            v-if="
              btn.name == 'add' ||
              'itemAdd' ||
              'origin' ||
              'resetPwd' ||
              'handle'
            "
            v-auth="'add'"
            v-blur
            @click="onButtonClick(btn)"
            :class="btn.class"
            class="table-operate"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
          </el-button>
        </el-tooltip>
        <!-- 查询按钮 目前包括台账查询 -->
        <el-tooltip
          v-if="btn.render == 'query'"
          :disabled="btn.disabled && btn.disabled(row, field)"
          :content="btn.title ? btn.title : ''"
          placement="top"
        >
          <el-button
            v-if="btn.name == 'query'"
            v-auth="'query'"
            v-blur
            @click="onButtonClick(btn)"
            :class="btn.class"
            class="table-operate"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
          </el-button>
        </el-tooltip>
        <!-- 拖拽按钮 暂无 -->
        <el-tooltip
          v-if="btn.render == 'moveButton'"
          :disabled="btn.disabled && btn.disabled(row, field)"
          :content="btn.title ? btn.title : ''"
          placement="top"
        >
          <el-button
            v-if="btn.name == 'weigh-sort'"
            :class="btn.class"
            class="table-operate move-button"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
            <!-- <component
              :is="btn.icon"
              style="width: 1em; height: 1em; color: #fff"
            ></component> -->
            <div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
          </el-button>
          <el-button
            v-else
            v-blur
            :class="btn.class"
            class="table-operate move-button"
            :type="btn.type"
          >
            <Icon :name="btn.icon" />
            <!-- <component
              :is="btn.icon"
              style="width: 1em; height: 1em; color: #fff"
            ></component> -->
            <div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
          </el-button>
        </el-tooltip>
        <!-- 悬停下拉菜单按钮 -->
        <el-dropdown
          v-if="btn.render == 'dropdown'"
          split-button
          type="primary"
          size="small"
          :class="btn.class"
          style="padding: 0px 5px"
        >
          <span class="el-dropdown-link">
            {{ btn.title }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="(item, index) in btn.attr.dropdown"
                :key="index"
                @click="onButtonClick(item)"
              >
                <Icon :name="item.icon" />
                {{ item.title }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, inject } from "vue";
import type { TagProps } from "element-plus";
import type { TableColumn, TableRow, OptButton } from "@/utils/baTable"; //表格列行类型
import { timeFormat, openUrl } from "@/utils/common"; //格式化时间戳
import useCurrentInstance from "@/utils/useCurrentInstance";

const route = inject("route");

const { proxy } = useCurrentInstance();
interface Props {
  //scope.row
  row: TableRow;
  //表格的item数据
  field: TableColumn;
  // 字段名
  property?: string;
}

//设置默认值
const props = withDefaults(defineProps<Props>(), {
  row: () => [],
  field: () => {
    return {};
  },
  property: "",
});

//字段值(单元格值)
const fieldValue = ref(props.row[props.property]);

const changeField = (value: any, fieldName: keyof TableRow) => {
  if (props.field.render == "switch" || "switchAccess") {
    proxy.eventBus.emit("onTableFieldChange", {
      value: value,
      row: props.row,
      field: fieldName,
      render: props.field.render,
    });
  }
};

const getTagType = (value: string, custom: any): TagProps["type"] => {
  return custom && custom[value] ? custom[value] : "";
};

const onButtonClick = (btn: OptButton) => {
  if (typeof btn.click === "function") {
    btn.click(props.row, props.field);
    return;
  }
  //按钮点击事件
  proxy.eventBus.emit("onTableButtonClick", {
    name: btn.name,
    row: props.row,
  });
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
.m-10 {
  margin: 4px;
}

.ba-render-image {
  text-align: center;
}

.images-item {
  width: 50px;
  margin: 0 5px;
}

.el-image {
  height: 36px;
  width: 36px;
}

.table-operate-text {
  padding-left: 5px;
}

.table-operate {
  padding: 4px 5px;
  height: auto;
}

.table-operate .icon {
  font-size: 14px !important;
  color: var(--ba-bg-color-overlay) !important;
}
.table-row-dropdown {
  color: white;
}

.move-button {
  cursor: move;
}

.ml-6 {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}

.ml-6 + .el-button {
  margin-left: 6px;
}
</style>
